[inject ./head.xd]
[style
  [rule :root;
    [var correct-color; [Green-7]]
    [var wrong-color; [Red-7]]
  ]
  [rule .question;
    [: display; flex]
    [: flex-flow; column nowrap]
    [: border; 2px solid [Gray-10]]
    [: margin-block; .4rem]
    [: padding; .4rem]
  ]
  [rule .question.correct;
    [: border-color; [var correct-color]]
  ]
  [rule .question.wrong;
    [: border-color; [var wrong-color]]
  ]
  [rule .question-text;
    [: color; [var fg-accent]]
  ]
  [rule .question:not(.correct, .wrong) .answered-only;
    [: visibility; hidden]
  ]
  [rule .answer-container;
    [: margin-block-start; .4rem]
  ]
  [rule .answer;
    [: margin-inline-end; .4rem]
  ]
  [rule :is(.question.correct, .question.wrong) input[_ data-correct] + label;
    [: color; [var correct-color]]
    [: font-weight; bold]
  ]
  [rule .question.wrong input:checked + label;
    [: color; [var wrong-color]]
  ]
]
[<noscript> [<p> .error; Ke správnému fungování této stránky je potřeba JavaScript.]]
[js-module-raw
  for (const question of document.getElementsByClassName("question")) {
    for (const answer of question.getElementsByClassName("answer")) {
      answer.checked = false;
      answer.addEventListener("click", () => {
        const correct = "correct" in answer.dataset;
        question.classList.add(correct ? "correct" : "wrong");
        for (const answer of question.getElementsByClassName("answer")) {
          answer.disabled = true;
        }
      });
    }
  }
]
[<form> .list-options; method="GET";
  [<div> .labeled-input;
    [<label> Skupiny autorů]
    [<div> .radios;
      [def opt; name id;
        [<input> #author-group-[arg id]; name="author-group"; type="checkbox"; value="[arg id]"; {author_group_[js-call id => id.replaceAll("-", "_"); [arg id]]}]
        [<label> for="author-group-[arg id]"; [arg name]]
      ]
      [opt GyMik učitelé; gymik-teachers]
      [opt GyMik Brouskovci; gymik-brousek-students]
      [opt Matematičtí pátkaři; math-fridays]
    ]
  ]
  [<button> type="submit"; Vygenerovat]
]
[<div> .questions; {questions}]
